  <html>
      <head>
          <title>DOMination CSS Selector Testing</title>
          <script type="text/javascript" src="raven.js"></script>
          <style type="text/css">
        *
        {
            padding: 0px;
            margin: 0px;
        }
  
        DIV,P,SPAN
        {
            display: block;
            margin: 0px 20px;
            padding: 0px;
            color: black;
        }
  
        #container
        {
            padding: 20px;
            margin: 10px;
            background-color: #DDDDDD;
            border: 1px dashed blue;
        }
          </style>
  
          <script type="text/javascript">
        function $(id)
        {
            return document.getElementById(id);
        }
        function t()
        {
            return (new Date()).getTime();
        }
        function b(css)
        {
            $("results").innerHTML = "";
            var elms = Raven(css);
            var length = elms.length;
            for( i = 0; i < length; i++ )
            {
          elms[i].style.color = "red";
          elms[i].style.border = "1px dashed red";
            }
            alert(css + "\n" +elms.length+"\n" + elms);
            for( i = 0; i < length; i++ )
            {
          elms[i].style.color = "black";
          elms[i].style.border = "0px";
          
            }
        }
        function a(css)
        {
              //try
             // {
            var cycles = 300, start = t(), end;
            //for( i = 0; i < cycles; i++) Raven(css, "container");
            for( i = 0; i < cycles; i++) Raven(css);
            end = t();
            $("results").innerHTML += ("<b>" + css + "</b>\n\tellapsed: " + (end-start) + "\taverage: " + (end-start)/cycles +"<br/>");
             // }
              //catch(e)
              //{
               //   throw e;
            //$("results").innerHTML += ("<font color='red'><b>" + css + "</b>\n\tellapsed: " + (end-start) + "\taverage: " + (end-start)/cycles +"<br/></font>");
             /// }
  
            return (end-start);
        }
        function startTest() {
            var total = 0, sub = 0;
            $("results").innerHTML = "";
            total += a("*");
            total += a("H1");
            total += a("DIV");
            total += a("TABLE");
            total += a("THEAD");
            total += a("TH");
            total += a("TBODY");
            total += a("TR");
            total += a("TD");
            total += a("TABLE TD");
            total += a("TABLE TR TD");
            $("results").innerHTML += "Subtotal : " + (total - sub) + "<hr/><br/>";
            sub = total;
            
            //ID and Class selector testing
            total += a("#table1header");
            total += a("#table2header");
            total += a(".bold");
            total += a("TABLE#table2");
            total += a("DIV.bold");
            $("results").innerHTML += "Subtotal : " + (total - sub) + "<hr/><br/>";
            sub = total;
            
            //sibling/child selector testing
            total += a("DIV.bold + TABLE");
            total += a("DIV.bold + TABLE#table2");
            total += a("DIV.bold ~ TABLE");
            total += a("DIV.bold ~ TABLE#table2");
			total += a("TR > TD");
            total += a(".row > TD");
            total += a("TR.row > TD");
            $("results").innerHTML += "Subtotal : " + (total - sub) + "<hr/><br/>";
            sub = total;
            
            //attribute selector testing
            total += a("TR[class='row']");
            total += a("TR[class$='row']");
            total += a("TR[class^='sub']");
            total += a("TR[class*='bro']");
            $("results").innerHTML += "Subtotal : " + (total - sub) + "<hr/><br/>";
            sub = total;
            
            //psudeo selector testing
            total += a("TD:first-child");
            total += a("TD:last-child");
            total += a("TD:only-child");
            total += a("TD:even");
            total += a("TD:odd");
            $("results").innerHTML += "Subtotal : " + (total - sub) + "<hr/><br/>";
            $("results").innerHTML += "<h2>Total : " + total + "</h2>";
        }
          </script>
      </head>
      <body>
  
  
  
  
          
          <div id="container">
        <h1 id="header1">DOM Traversal Test</h1>
        <div class="bold" id="table1header">Table 1:</div>
        <table border="0" cellpadding="0" cellspacing="0" id="table1">
            <tr class="row">
          <td>Row 1 Cell 1</td>
          <td>Row 1 Cell 2</td>
            </tr>
        </table>
        <div class="bold" id="table2header">Table 2:</div>
        <table border="0" cellpadding="0" cellspacing="0" id="table2">
            <thead>
          <tr class="row">
              <th>Column 1</th>
              <th>Column 2</th>
          </tr>
            </thead>
            <tbody id="tbody2">
          <tr class="row">
              <td>Row 1 Cell 1</td>
              <td>Row 1 Cell 2</td>
          </tr>
          <tr class="row">
              <td colspan="2">
                  <table border="1" cellpadding="1" cellspacing="1" id="subtable" width="100%">
                <tr class="subrow">
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                  </table>
              </td>
          </tr>
          <tr class="row">
              <td colspan="2">
				<hr/>
                  <table border="1" cellpadding="1" cellspacing="1" id="subtable" width="110%">
                <tr class="subrow">
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                  </table>
              </td>
          </tr>
            </tbody>
        </table>
  
        <table id="bigtable">
            <tr>
          <td>cell 1</td>
          <td>cell 2</td>
          <td>cell 3</td>
          <td>cell 4</td>
          <td>cell 4</td>
            </tr>
            <tr>
          <td>cell 1</td>
          <td>cell 2</td>
          <td>cell 3</td>
          <td>cell 4</td>
          <td>cell 4</td>
            </tr>
            <tr>
          <td>cell 1</td>
          <td>cell 2</td>
          <td>cell 3</td>
          <td>cell 4</td>
          <td>cell 4</td>
            </tr>
            <tr>
          <td>cell 1</td>
          <td>cell 2</td>
          <td>cell 3</td>
          <td>cell 4</td>
          <td>cell 4</td>
            </tr>
            <tr>
          <td>cell 1</td>
          <td>cell 2</td>
          <td>cell 3</td>
          <td>cell 4</td>
          <td>cell 4</td>
            </tr>
            <tr>
          <td>cell 1</td>
          <td>cell 2</td>
          <td>cell 3</td>
          <td>cell 4</td>
          <td>cell 4</td>
            </tr>
            <tr>
          <td>cell 1</td>
          <td>cell 2</td>
          <td>cell 3</td>
          <td>cell 4</td>
          <td>cell 4</td>
            </tr>
            <tr>
          <td>cell 1</td>
          <td>cell 2</td>
          <td>cell 3</td>
          <td>cell 4</td>
          <td>cell 4</td>
            </tr>
            <tr>
          <td>cell 1</td>
          <td>cell 2</td>
          <td>cell 3</td>
          <td>cell 4</td>
          <td>cell 4</td>
            </tr>
            <tr>
          <td>cell 1</td>
          <td>cell 2</td>
          <td>cell 3</td>
          <td>cell 4</td>
          <td>cell 4</td>
            </tr>
        </table>
		
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="password" />
          </div>
  
  
  
  
  
          <div>
            Enter your own:<br/>
        <textarea id="customCSS" cols="50" rows="5"></textarea><br/>
        <input type="button" value="Test This" onClick="b($('customCSS').value)" />
        &nbsp; &nbsp;
        <input type="button" value="Start Automatic Test" onClick="startTest();" />
          </div>
          <pre id="results"></pre>
      </body>
  </html>
  
